<template>
  <view v-if="shenheStatus == 0" class="applyShop">
    <scroll-view class="scroll" scroll-y>
      <swiper class="swiper" :autoplay="true" v-if="area_agent_banner_status">
        <swiper-item
          v-for="(item, index) in area_agent_banner_images"
          :key="index"
        >
          <image :src="item" class="head"></image>
        </swiper-item>
      </swiper>

      <view class="formBox">
        <view class="formItem">
          <text class="title">代理类型</text>
          <u-radio-group
            v-model="form.agent_type"
            @change="changeType"
            active-color="#f0250e"
          >
            <u-radio name="1">省</u-radio>
            <u-radio name="2">市</u-radio>
            <u-radio name="3">区</u-radio>
          </u-radio-group>
        </view>

        <view class="formItem" @click="showAd = true">
          <text class="title">地区</text>
          <view class="area-info">
            <text :class="areaInfo ? 'color-black' : ''">{{
              areaInfo || "请选择"
            }}</text>
            <u-icon size="24" color="#888888" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="foot">
      <text class="btn" @click="submit">{{
        status == 2 ? "已拒绝请,重新申请" : "申请"
      }}</text>
    </view>
    <u-select
      v-model="showAd"
      value-name="id"
      label-name="name"
      mode="mutil-column-auto"
      :list="getDistrictList"
      @confirm="areaPicker"
    ></u-select>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";

export default {
  components: { Shenhe },
  data() {
    return {
      form: {
        agent_type: "1",
        province_id: 0,
        city_id: 0,
        district_id: 0,
      },

      areaInfo: "",
      area_agent_banner_images: [],

      districtList: [],
      showAd: false,
      area_agent_banner_status: 1,
      status: 1, //状态 0审核中  1通过  2拒绝
    };
  },

  computed: {
    getDistrictList() {
      let districtList = JSON.parse(JSON.stringify(this.districtList)),
        { agent_type } = this.form;

      if (agent_type == "1") {
        districtList.forEach((el) => {
          delete el.children;
        });
      } else if (agent_type == "2") {
        districtList.forEach((el) => {
          el.children.forEach((e) => {
            delete e.children;
          });
        });
      }

      return districtList;
    },
  },

  onLoad() {
    this.getDistrict();
    this.getStatus();
  },

  methods: {
    async getStatus() {
      const res = await this.$allrequest.shareholder.getAreaAgentApply(
        {},
        true
      );
      if (!res.code) {
        const {
          agent_type,
          area_agent_banner_images,
          area_agent_banner_status,
          city_id,
          district_id,
          province_id,
          province,
          city,
          district,
          status,
        } = res.data;

        this.form = {
          agent_type,
          province_id,
          city_id,
          district_id,
        };
        if (province || city || district) {
          this.areaInfo = `${province} ${city} ${district}`;
        }
        this.area_agent_banner_images = area_agent_banner_images;
        this.status = status;
        this.area_agent_banner_status = area_agent_banner_status;

        if (status === 1) {
          this.$utils.toUrl("/area/userInfo/index", "redirectTo");
        }
      }
    },

    areaPicker(e) {
      switch (e.length) {
        case 1:
          this.form.province_id = e[0].value || 0;
          break;

        case 2:
          this.form.province_id = e[0].value || 0;
          this.form.city_id = e[1].value || 0;
          break;

        case 3:
          this.form.province_id = e[0].value || 0;
          this.form.city_id = e[1].value || 0;
          this.form.district_id = e[2].value || 0;

          break;
      }

      this.areaInfo = e.map((el) => el.label).join(" ");
    },

    submit() {
      uni.$u.throttle(() => {
        if (!this.form.agent_type) {
          uni.showToast({
            title: "请选择类型",
            icon: "none",
          });
          return;
        }

        if (!this.form.province_id) {
          uni.showToast({
            title: "请选择地区",
            icon: "none",
          });
          return;
        }

        this.$allrequest.shareholder
          .areaAgentApply(this.form, true)
          .then((res) => {
            if (!res.code) {
              uni.showToast({
                title: res.msg,
              });

              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
              });
            }
          })
          .catch((err) => {
            uni.showToast({
              title: err.msg,
              icon: "none",
            });
          });
      }, 500);
    },

    async getDistrict() {
      try {
        const res = await this.$allrequest.user.get_district({});
        res.data.forEach((item) => {
          if (item.cityAll) {
            item.children = item.cityAll;
            item.children.forEach((el) => {
              if (el.districtAll) {
                el.children = el.districtAll;
              }
            });
          }
        });
        this.districtList = res.data;
      } catch (e) {}
    },

    changeType() {
      uni.showToast({
        icon: "loading",
        title: "正在加载...",
        duration: 1500,
      });

      this.areaInfo = "";
      this.form.province_id = "";
      this.form.city_id = "";
      this.form.district_id = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.applyShop {
  height: 100vh;
  background-color: #f2f2f2;
  font-family: PingFang SC;
  color: #262626;
  display: flex;
  flex-direction: column;

  .swiper {
    width: 100%;
    height: 360rpx;
    display: block;
  }
  .head {
    width: 100%;
    height: 360rpx;
    display: block;
  }

  .scroll {
    flex: 1;
    overflow-y: auto;
  }

  .formBox {
    padding-left: 30rpx;
    background-color: #fff;
    .formItem {
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      padding-right: 30rpx;
      justify-content: space-between;
      border-bottom: 1px solid #f1f1f1;
      .title {
        width: 160rpx;
        font-size: 30rpx;
        text-align: left;
      }
      input {
        flex: 1;
        text-align: left;
      }
      .input-hold {
        color: #8c8c8c;
      }

      .area-info {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
        .color-black {
          color: rgb(38, 38, 38);

          input {
            color: rgb(38, 38, 38);
          }
        }
      }
    }
  }
  .foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    width: 100%;
    padding-top: 20rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom));
    border-top: 1px solid #eee;
    .btn {
      width: 678rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background-color: #f0250e;
      font-size: 32rpx;
      color: #fff;
      font-weight: 500;
      border-radius: 999rpx;
    }
    .tip {
      margin: 20rpx 0;
      font-size: 24rpx;
      color: #f0250e;
    }
  }
}
</style>
